<template>
	<view class="order">
		<uv-tabs
			:current="currentTab"
			:list="list"
			:activeStyle="{ color: config.theme.primary }"
			:line-color="config.theme.primary"
			@change="handleTabChange"
		></uv-tabs>
		<view class="main">
			<view class="order-list">
				<view
					class="order-item"
					v-for="(order, index) in formatOrderList"
					:key="index"
					@click="handleToOrderDetails(order)"
				>
					<view class="order-item_top">
						<view class="title">
							<text class="text">用工订单</text>
							<text class="date">{{ dayjs(order.employment_time).format("YYYY-MM-DD hh:ss") }}</text>
						</view>
						<view class="status" :style="{ color: statusMap[order.status].color }">
							{{ statusMap[order.status].text }}
						</view>
					</view>
					<view class="content">
						<view class="c-item job-type">{{ order.job_type_id[0] ? order.job_type_id[0].name : "" }}订单</view>
						<view class="c-item address">{{ order.address }}</view>
					</view>
				</view>
			</view>
			<uv-empty v-if="!formatOrderList.length" margin-top="100px"></uv-empty>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue";
import config from "@/config.js";
import { onShow } from "@dcloudio/uni-app";
import { computed } from "vue";
import dayjs from "dayjs";

const db = uniCloud.database().collection("order,job-type");

const statusMap = {
	0: { text: "待接单", color: "#dd524d" },
	1: { text: "进行中", color: "#f6d44c" },
	2: { text: "待评价", color: "#fa9f1e" },
	3: { text: "已完成", color: "#4cd964" },
	4: { text: "已取消", color: "#666666" }
};

const list = ref([
	{
		name: "全部",
		value: "all"
	},
	{
		name: "进行中",
		value: 0
	},
	{
		name: "待支付",
		value: 1
	},
	{
		name: "待评价",
		value: 2
	},
	{
		name: "已完成",
		value: 3
	},
	{
		name: "已取消",
		value: 4
	}
]);

const currentTab = ref(0);

const orderList = ref([]);

const cuurentStatus = computed(() => {
	return list.value[currentTab.value].value;
});

const formatOrderList = computed(() => {
	console.log(cuurentStatus.value);
	if (cuurentStatus.value == "all") {
		return orderList.value;
	}
	return orderList.value.filter((i) => i.status == cuurentStatus.value);
});

const handleGetOrderList = async () => {
	try {
		const userInfo = uni.getStorageSync("uni-id-pages-userInfo");
		if (userInfo._id) {
			const response = await db.orderBy("create_time desc").where(`user_id == "${userInfo._id}"`).get();
			if (response.result.errCode == 0) {
				console.log(response.res);
				orderList.value = response.result.data;
			}
		}
	} catch (err) {
		uni.showToast({
			icon: "none",
			title: err.errMsg
		});
	}
};

const handleTabChange = (event) => {
	currentTab.value = event.index;
};

const handleToOrderDetails = (order) => {
	const query = `?order_no=${order.order_no}`;
	uni.navigateTo({
		url: `/pages/order-details/order-details${query}`
	});
};

onShow(() => {
	handleGetOrderList();
});
</script>

<style lang="scss" scoped>
.order {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;

	.main {
		flex: 1;
		background-color: #f4f5f9;

		.order-list {
			padding: 10px 20px;
			.order-item {
				background-color: #ffffff;
				border-radius: 10px;
				padding: 20px;
				margin-bottom: 20px;

				.order-item_top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.title {
						.text {
							font-weight: bold;
						}
						.date {
							margin-left: 10px;
							color: #666666;
							font-size: 14px;
						}
					}
					.status {
						font-size: 14px;
					}
				}

				.content {
					margin-top: 10px;
					border-top: 1px solid #e6e8eb;
					color: #888b9a;

					.c-item {
						display: flex;
						align-items: center;
						margin-top: 10px;
						&:before {
							content: "";
							display: block;
							width: 10px;
							height: 10px;
							background-color: red;
							border-radius: 10px;
							margin-right: 10px;
						}
						&.job-type {
							&:before {
								background-color: #33cc66;
							}
						}
						&.address {
							&:before {
								background-color: #ff7e40;
							}
						}
					}
				}
			}
		}
	}
}
</style>
